<template>
    <div class="video-play">
        <div class="title-bar">
            <div class="btn-back" @click="onBack">
                <img
                    src="https://7769-winfyho-cloud-0gfbcdsg0e062644-1301825810.tcb.qcloud.la/cloudbase-cms/upload/2021-04-30/nkpddoxv10pbf2p9mst0zkshwdmvtukc_.png"
                />
            </div>
        </div>

        <div class="body">
            <video-player
                v-if="videoInfo.video"
                ref="videoPlayer"
                :playsinline="playsinline"
                class="video-player vjs-custom-skin"
                :options="playerOptions"
                @statechanged="onStateChanged($event)"
                @canplay="onPlayerCanplay($event)"
            ></video-player>
        </div>

        <div class="video-mask" @click.prevent.stop="onClickMask">
            <div v-show="!isPlaying" class="btn-play">
                <img
                    src="https://7769-winfyho-cloud-0gfbcdsg0e062644-1301825810.tcb.qcloud.la/cloudbase-cms/upload/2021-04-30/4pkcud6b44hq0g8lkeo6ip70uut4adpm_.png"
                />
            </div>

            <div v-if="videoData.views" class="modal">
                <div class="actions">
                    <div class="group" @click.stop>
                        <div
                            class="liked btn"
                            @click.stop="updateVideoLikes(docId)"
                        >
                            <div class="icon">
                                <img
                                    v-if="isLiked"
                                    src="https://636f-config-6g59fklgcbef7563-1301825810.tcb.qcloud.la/cloudbase-cms/upload/2021-05-02/8p5qvjgv3uljmghu6qdho0185bkfghw3_.png"
                                />
                                <img
                                    v-else
                                    src="https://636f-config-6g59fklgcbef7563-1301825810.tcb.qcloud.la/cloudbase-cms/upload/2021-05-02/5gkwbzohcbtpypzss0sibythdc0j2d88_.png"
                                />
                            </div>
                            <div class="num">{{ likedCount }}</div>
                        </div>

                        <div
                            class="btn btn-collect"
                            @click.stop="collcetVideo(docId)"
                        >
                            <ButtonCollect :isCollect="isCollect" />
                        </div>

                        <div
                            class="share btn video-share-btn"
                            @click.stop="onShareVideo(docId)"
                        >
                            <div class="icon">
                                <img
                                    src="https://7769-winfyho-cloud-0gfbcdsg0e062644-1301825810.tcb.qcloud.la/cloudbase-cms/upload/2021-04-30/906occ61vohjjhxkdyd5tb1e1harglj3_.png"
                                />
                            </div>
                            <div class="num">分享</div>
                        </div>
                    </div>
                </div>

                <div class="video-info">
                    <div class="title text-overflow-ellipsis-1">
                        {{ videoInfo.title }}
                    </div>
                    <div class="content text-overflow-ellipsis-2">
                        {{ videoInfo.desc }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import config from "@/config/index";
import ButtonCollect from "@/components/button/collect";

import mixinVideoBehavior from "@/pages/discover/mixin/video";
export default {
    components: {
        ButtonCollect
    },
    mixins: [mixinVideoBehavior],
    data() {
        return {
            docId: "",
            playerOptions: {
                autoplay: true, // 如果为true,浏览器准备好时开始回放。
                muted: false, // 默认情况下将会消除任何音频。
                loop: true, // 是否视频一结束就重新开始。
                preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: "zh-CN",
                aspectRatio: "9:16", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [
                    {
                        type: "video/mp4", // 类型
                        src: "" // url地址
                    }
                ],
                poster: "https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png", // 封面地址
                notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
                controlBar: {
                    timeDivider: false, // 当前时间和持续时间的分隔符
                    durationDisplay: false, // 显示持续时间
                    remainingTimeDisplay: false, // 是否显示剩余时间功能
                    fullscreenToggle: false // 是否显示全屏按钮
                }
            },
            videoInfo: {},
            canplay: false,
            isPlaying: false
        };
    },
    computed: {
        playsinline() {
            let ua = navigator.userAgent.toLocaleLowerCase();
            if (
                ua.match(/tencenttraveler/) !== null ||
                ua.match(/qqbrowse/) !== null
            ) {
                return false;
            } else {
                return true;
            }
        }
    },
    created() {
        this.$showLoading();
        this.getVideoInfo();
    },

    mounted() {
        const { clientWidth, clientHeight } = document.body;
        this.$set(
            this.playerOptions,
            "aspectRatio",
            `${clientWidth}:${clientHeight}`
        );
    },

    methods: {
        onClickMask() {
            if (this.isPlaying) {
                console.log("暂停视频");

                this.$refs.videoPlayer.player.pause();
                this.isPlaying = false;
            } else {
                console.log("播放视频");

                this.$refs.videoPlayer.player.play();
                this.isPlaying = true;
            }
        },
        onStateChanged(playerCurrentState) {
            if (playerCurrentState.playing) {
                this.isPlaying = true;
            }
            // console.log("状态更新", playerCurrentState);
        },

        onBack() {
            this.$router.go(-1);
        },

        getVideoInfo() {
            const baseURL = config.cmsApi;

            const docId = this.$route.query.docId;
            this.docId = docId;

            axios.get(`${baseURL}/video/${docId}`).then(res => {
                this.$hideLoading();
                const videoInfo = res.data.data;
                console.log("视频", videoInfo);
                this.videoInfo = videoInfo;
                this.$set(this.playerOptions, "sources", [
                    {
                        type: "video/mp4",
                        src: videoInfo.video
                    }
                ]);
                this.$set(this.playerOptions, "poster", videoInfo.coverImg);

                // 添加浏览记录
                this.$cloudApi.addUserHistory({
                    data: {
                        type: "video",
                        detail: {
                            docId: docId,
                            item: videoInfo
                        },
                        path: this.$route.fullPath
                    }
                });
                this.updateVideoViews(docId);
            });
        },

        onShareVideo() {
            const link = `${window.location.href}&wtagid=${6666}`;
            const content = `分享一个视频给你：${link}`;
            this.$showModal({
                title: "分享视频",
                content,
                confirmText: "复制到粘贴版",
                confirm: () => {
                    console.log("分享视频", link);
                    console.log("分享视频", link);
                }
            });
        },
        onPlayerCanplay() {
            const el = this.$refs.videoPlayer.$el;
            const videoDom = el.getElementsByClassName("vjs-tech")[0];
            console.log(
                "onPlayerCanplay",
                videoDom.getAttribute("x5-video-player-type")
            );
            videoDom.setAttribute("x5-video-player-type", "h5-page");
        }
    }
};
</script>

<style lang="less">
.video-play {
    width: 100vw;
    height: 100vh;
    background: #000;
    color: #fff;

    .title-bar {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        height: 90px;
        z-index: 2020;
        display: flex;
        align-items: center;

        .btn-back {
            margin-left: 30px;
            width: 50px;
            img {
                width: 100%;
            }
        }
    }
    .body {
        width: 100vw;
        height: 100vh;

        .video-player {
            width: 100vw;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);

            .vjs-big-play-button {
                display: none;
            }

            .vjs-control-bar {
                position: fixed;
                display: none;
            }
        }
    }
    .video-mask {
        position: fixed;
        z-index: 9;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;

        .btn-play {
            position: fixed;
            top: 50%;
            left: 50%;
            width: 110px;
            height: 110px;
            transform: translateX(-50%) translateY(-50%);
            z-index: 2020;
            opacity: 0.5;
        }
    }
    .modal {
        position: fixed;
        z-index: 10;
        bottom: 0;
        left: 0;
        right: 0;
        box-sizing: border-box;
        padding: 30px 30px 50px 30px;

        .actions {
            display: flex;
            justify-content: flex-end;
            .group {
                font-size: 24px;
                text-align: center;
                padding-bottom: 20px;
                .btn {
                    margin-top: 30px;
                    text-align: center;

                    .icon {
                        display: inline-block;
                        width: 50px;
                        img {
                            width: 100%;
                        }
                    }
                }

                .btn-collect {
                    width: 50px;
                }
            }
        }

        .video-info {
            .title {
                font-weight: bold;
                font-size: 30px;
                padding-bottom: 30px;
            }
        }
    }
}
</style>
